<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Aether : Password Test Suit</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<link type="text/css" rel="stylesheet" href="http://github.com/jquery/jquery-ui/raw/1.9m1/themes/base/jquery.ui.all.css" />
	<link type="text/css" rel="stylesheet" href="./ui.formvalidation.css" />

	<style type="text/css">
		body {
			font-size: 62.5%;
			font-family: Verdana;
		}

		p {
			font-size: 1.1em;
		}

		pre,code {
			font-size: 1.2em;
		}

		input,
		textarea,
		select,
		label {
			position: relative;
			text-align: left;
			outline: 0;
			padding: .4em;
			margin-right: .4em;

			font-size: 1.1em;

			display: -moz-inline-stack;
			display: inline-block;
			zoom: 1;
			*display: inline;
		}

		input {
			width: 12em;
		}

	</style>

	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.tooltip.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.progressbar.js"></script>

	<script src="./ui.formvalidation.js" type="text/javascript"></script>

	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>

	<script type="text/javascript">

	$(function() {
		$('<div/>').css({
			position: "absolute",
			right: 10,
			top: 10
		}).appendTo(document.body).themeswitcher();

		// add a new validator for US Zipcodes so we can test a new one.
		$.formvalidation.addValidator('minlength', function(value, param) {
			return (value.length >= param);
		}, 'must contain more than {0} character{s}');

		function enable() {
			$(':input')
				.formvalidation()
				.formvalidation('option', 'rules', { strength: 50 });

			$('#demo_2')
				.formvalidation('option', 'rules', { minlength: 8 });

			$('#demo_3')
				.formvalidation('option', 'rules', { minlength: 14 });
		}
		enable();

		$("#disable").toggle(function() {
			$("*").formvalidation("disable");
		}, function() {
			$("*").formvalidation("enable");
		});
		$("#toggle").toggle(function() {
			$("*").formvalidation("destroy");
		}, function() {
			enable();
		});
	});
	</script>
</head>

<body>

	<p>Please note this demo does not us the password input type so that you can see what characters are entered.</p>

	<h3>Demo Zero : Strength 50% - not required</h3>

	<label for="demo_0">Demo 0</label>
	<input type="text" name="demo_0" id="demo_0" value="test" />

	<hr />

	<h3>Demo One : Strength 50% - is required</h3>

	<label for="demo_1">Demo 1</label>
	<input type="text" name="demo_1" id="demo_1" value="" required="required" />

	<hr />

	<h3>Demo Two : Strength 50% - minimum 8 characters - is required</h3>

	<label for="demo_2">Demo 2</label>
	<input type="text" name="demo_2" id="demo_2" value="" required="required" />

	<hr />

	<h3>Demo Three : Strength 50% - minimum 14 characters - is required</h3>

	<label for="demo_3">Demo 3</label>
	<input type="text" name="demo_3" id="demo_3" value="S3p@Ko0l@t" required="required" />

	<hr/>

	<button id="disable">Toggle disabled</button>
	<button id="toggle">Toggle widget</button>

	<br />

	<br />

</body>
</html>